<template>
  <div class="profile-page">
    <!-- 头部信息 -->
    <div class="profile-header">
      <div class="avatar">
        <img :src="userInfo.avatar" alt="头像" />
      </div>
      <div class="nickname">{{ userInfo.nickname }}</div>
      <button class="edit-button" @click="handleEditProfile">编辑资料</button>
    </div>

    <!-- 功能选项 -->
    <div class="profile-options">
      <div class="option-item" @click="handleMyPosts">
        <span>我的发布</span>
        <i class="icon-arrow">→</i>
      </div>
      <div class="option-item" @click="handleMyLikes">
        <span>我的喜欢</span>
        <i class="icon-arrow">→</i>
      </div>
      <div class="option-item" @click="handleTransactionRecords">
        <span>交易记录</span>
        <i class="icon-arrow">→</i>
      </div>
    </div>
  </div>
</template>

<script>
import axios from 'axios'; // 引入 axios

let token = sessionStorage.getItem('token');
export default {
  name: 'ProfilePage',
  data() {
    return {
      userInfo: {
        avatar: '', // 初始化为空
        nickname: '', // 初始化为空
      },
    };
  },
  mounted() {
    this.fetchUserInfo(); // 组件加载时自动获取用户信息
  },
  methods: {
    // 获取用户信息
    async fetchUserInfo() {
      try {
        let token = sessionStorage.getItem("token");
        const response = await axios.get('http://localhost:9090/user/info', {
          headers: {
            'Authorization': `Bearer ${token}` // 将 token 添加到 Authorization 头
          }});
        const { headImage, petName } = response.data.data; // 解构返回的数据
        this.userInfo.avatar = headImage; // 更新头像
        this.userInfo.nickname = petName; // 更新昵称
        console.log("头像"+headImage);
        console.log("昵称"+petName);
      } catch (error) {
        console.error('获取用户信息失败:', error);
      }
    },
    // 编辑资料
    handleEditProfile() {
      console.log('编辑资料');
      console.log('token:'+token);
      this.$router.push('/edit');
      // 这里可以跳转到编辑资料页面
    },
    // 我的发布
    handleMyPosts() {
      console.log('查看我的发布');
      // 这里可以跳转到我的发布页面
    },
    // 我的喜欢
    handleMyLikes() {
      console.log('查看我的喜欢');
      // 这里可以跳转到我的喜欢页面
    },
    // 交易记录
    handleTransactionRecords() {
      console.log('查看交易记录');
      // 这里可以跳转到交易记录页面
    },
  },
};
</script>

<style scoped>
.profile-page {
  padding: 20px;
  max-width: 600px;
  margin: 0 auto;
  background-color: #f9f9f9;
  border-radius: 8px;
}

/* 头部信息 */
.profile-header {
  display: flex;
  align-items: center;
  padding: 20px;
  background-color: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  margin-bottom: 20px;
}

.avatar img {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  margin-right: 15px;
}

.nickname {
  font-size: 18px;
  font-weight: bold;
  flex: 1;
}

.edit-button {
  background-color: #007bff;
  color: #fff;
  border: none;
  padding: 8px 16px;
  border-radius: 5px;
  cursor: pointer;
  font-size: 14px;
}

.edit-button:hover {
  background-color: #0056b3;
}

/* 功能选项 */
.profile-options {
  background-color: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.option-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 15px 20px;
  border-bottom: 1px solid #eee;
  cursor: pointer;
  font-size: 16px;
}

.option-item:last-child {
  border-bottom: none;
}

.option-item:hover {
  background-color: #f5f5f5;
}

.icon-arrow {
  font-size: 16px;
  color: #999;
}
</style>